<template>
  <div class="trace-back">
    <div class="trace-back__header">
      <div class="flex-between">
        <div class="title">追溯数据管理</div>
        <el-button type="primary" size="small" @click="save">保存</el-button>
      </div>
      <el-tabs v-model="activeName" class="" @tab-click="handleClick">
        <template v-for="(item, index) in tabList">
          <el-tab-pane :label="item.title" :name="index"></el-tab-pane>
        </template>
      </el-tabs>
    </div>
    <div class="trace-back__content" v-loading="loading">
      <div
        class="group-panel"
        v-for="(item, index) in tabList[activeName].dataList"
      >
        <div class="group-panel__header">
          <el-row align="middle">
            <el-col :span="4">
              <el-space>
                <div class="title">
                  <el-input v-model="item.group" placeholder="请填写分组名称" />
                </div>
                <el-color-picker v-model="item.color" />
              </el-space>
            </el-col>
            <el-col :span="20">
              <div class="space">
                <!-- <div
                  class="header-btn header-btn--delete"
                  @click="handleDeleteGroup(index)"
                >
                  删除
                </div> -->
                <el-dropdown trigger="click">
                  <span class="el-dropdown-link">
                    <i class="el-icon-more"></i>
                  </span>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item @click="handleDeleteGroup(index)"
                        ><span style="color: #f44">删除</span></el-dropdown-item
                      >
                      <el-dropdown-item
                        @click="item.collapse = !item.collapse"
                        >{{ item.collapse ? "展开" : "折叠" }}</el-dropdown-item
                      >
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>
        <div
          class="group-panel__content"
          :style="{
            height: !item.collapse ? 'auto' : '0',
            padding: !item.collapse ? '20px' : '0',
          }"
        >
          <div class="group-item" v-for="(node, i) in item.data">
            <el-divider v-if="i !== 0" border-style="dashed" />
            <el-row :gutter="40" class="px-lg">
              <el-col :span="tabList[activeName].type === 'news' ? 6 : 8">
                <div class="title">标题</div>
                <el-input v-model="node.title" placeholder="请填写标题" />
              </el-col>
              <el-col :span="tabList[activeName].type === 'news' ? 6 : 8">
                <div class="title">图片链接</div>
                <el-input v-model="node.image" placeholder="请填写图片链接" />
              </el-col>
              <el-col :span="tabList[activeName].type === 'news' ? 6 : 8">
                <div class="title">跳转链接</div>
                <el-input v-model="node.url" placeholder="请填写跳转链接" />
              </el-col>
              <el-col :span="6" v-if="tabList[activeName].type === 'news'">
                <div class="title">发布时间</div>
                <el-date-picker
                  v-model="node.date"
                  type="datetime"
                  placeholder="请选择发布时间"
                  format="YYYY-MM-DD"
                />
              </el-col>
            </el-row>
            <el-row
              :gutter="40"
              class="px-lg"
              v-if="tabList[activeName].type !== 'news'"
            >
              <el-col :span="24">
                <div class="title">正文</div>
                <el-input
                  v-model="node.content"
                  type="textarea"
                  :rows="2"
                  placeholder="请填写正文"
                />
              </el-col>
            </el-row>
            <div class="group-item-add">
              <div
                class="group-item-add-btn delete"
                @click="handleDeleteGroupItem(i, item.data, index)"
              >
                <i class="el-icon-delete"></i> 删除子项
              </div>
              <div
                class="group-item-add-btn"
                @click="handleAddGroupItem(i, item.data)"
              >
                <i class="el-icon-plus"></i>添加子项
              </div>
            </div>
          </div>
          <!-- <div class="group-item-add">
            <div
              class="group-item-add-btn"
              @click="handleAddGroupItem(item.data)"
            >
              添加子项
            </div>
          </div> -->
        </div>
      </div>
      <div class="group-add" @click="handleAddGroup">添加分组</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: 0,
      tabList: [
        {
          title: "检测中心",
          type: "testingCenter",
          dataList: [],
        },
        {
          title: "企业介绍",
          type: "enterprise",
          dataList: [],
        },
        {
          title: "生产信息",
          type: "prdInformation",
          dataList: [],
        },
        {
          title: "企业新闻",
          type: "news",
          dataList: [],
        },
      ],
      loading: false,
    };
  },
  async mounted() {
    await this.getData();
  },
  methods: {
    /**
     * 添加子项
     * @param {*} e
     */
    handleAddGroupItem(i, node) {
      node.splice(i + 1, 0, {
        title: "",
        image: "",
        url: "",
        content: "",
        date: "",
      });
    },

    /**
     * 删除子项
     * @param {*} i
     * @param {*} node
     */
    async handleDeleteGroupItem(i, node, index) {
      await this.$confirm(`确定删除该项吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        if (node.length === 1) {
          this.tabList[this.activeName].dataList.splice(index, 1);
        } else {
          node.splice(i, 1);
        }
      });
    },

    /**
     * 添加分组
     */
    handleAddGroup() {
      this.tabList[this.activeName].dataList.push({
        group: "",
        collapse: false,
        color: "",
        data: [
          {
            title: "",
            image: "",
            url: "",
            content: "",
            date: "",
          },
        ],
      });
    },

    /**
     * 删除分组
     * @param {*} i
     */
    async handleDeleteGroup(i) {
      await this.$confirm(`确定删除该分组吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.tabList[this.activeName].dataList.splice(i, 1);
      });
    },

    /**
     * 保存
     */
    async save() {
      this.loading = true;
      try {
        let param = this.tabList.reduce((pre, cur) => {
          pre[cur.type] = cur.dataList;
          return pre;
        }, {});
        let res = await this.callApi("update_trace_back_data", param);
        if (!res.res) {
          return;
        }
        this.$message.success(`保存成功`);
      } finally {
        this.loading = false;
      }
    },

    /**
     * 获取信息
     */
    async getData() {
      this.loading = true;
      try {
        let res = await this.callApi("get_trace_back_data");
        if (res.res) {
          this.tabList.forEach((v) => {
            v.dataList = res[v.type];
          });
        }
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.trace-back {
  height: 100%;
  margin: 0 -20px;
  background-color: #f9f9f9;

  &__header {
    padding: 20px 20px 0 20px;
    background-color: #fff;

    & > .title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 20px;
    }

    :deep(.el-tabs__header) {
      margin-bottom: 0;

      .el-tabs__nav-wrap::after {
        height: 0;
      }
    }
  }

  &__content {
    padding: 20px;
    box-sizing: border-box;
    height: calc(100% - 91px);
    overflow-x: hidden;
    overflow-y: auto;

    .el-row + .el-row {
      margin-top: 15px;
    }

    .group-panel {
      margin-top: 20px;
      background-color: #fff;
      box-shadow: 0 0 8px 5px #f7f7f7;

      &:nth-child(1) {
        margin-top: 0;
      }

      &__header {
        padding: 20px;
        box-sizing: border-box;
        border-bottom: 1px solid #ebebeb;

        .space {
          display: flex;
          justify-content: flex-end;
          cursor: pointer;
        }

        .header-btn {
          font-size: 15px;
          cursor: pointer;

          &--update {
            color: var(--el-color-primary);
          }
          &--delete {
            color: var(--el-color-error);
          }

          & + .header-btn {
            margin-left: 10px;
          }
        }
      }

      &__content {
        box-sizing: border-box;
        overflow: hidden;
        transition: height 0.6s;

        .title {
          font-size: 14px;
          margin-bottom: 8px;
        }

        :deep(.el-input) {
          width: 100%;
        }

        .group-item-add {
          display: flex;
          align-items: center;
          padding: 20px 15px 0 15px;
          justify-content: flex-end;

          .group-item-add-btn {
            width: 160px;
            height: 30px;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 4px;
            cursor: pointer;
            line-height: 1;
            color: var(--el-text-color-secondary);
            border: 1px solid var(--el-border-color-base);

            i {
              margin-right: 8px;
            }

            &:hover {
              color: var(--el-color-primary);
              border: 1px solid var(--el-color-primary);
            }

            &.delete {
              color: var(--el-color-danger);
              border: 1px solid var(--el-color-error-light);

              &:hover {
                border: 1px solid var(--el-color-error);
              }
            }

            & + .group-item-add-btn {
              margin-left: 10px;
            }
          }
        }
      }
    }

    .group-add {
      height: 35px;
      display: flex;
      cursor: pointer;
      font-size: 15px;
      align-items: center;
      justify-content: center;
      border: 1px dashed var(--el-border-color-base);
      background-color: #fff;
      position: relative;

      &:hover {
        border: 1px dashed var(--el-color-primary);
      }
    }
  }
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.px-lg {
  padding: 0 15px;
}

// :deep(.el-collapse-item__header) {
//   font-size: 15px;
//   font-weight: bold;
// }

// .body1 {
//   display: flex;
// }

// .body2 {
//   margin: 8px 12px 8px 0px;
//   width: 350px;
//   display: flex;
//   span {
//     width: 70px;
//     text-align: right;
//     margin-right: 5px;
//   }
// }
// .scr {
//   height: calc(100vh - 100px);
// }
</style>
